<template>
  <div>
    <div class="seleteDate">
      <div>更新推荐</div>
      <div :class="nums == 0 ? `active` : ''" @click="getNums(0), (nums = 0)">
        今天 <span></span>
      </div>
      <div :class="nums == 1 ? `active` : ''" @click="getNums(1), (nums = 1)">
        昨天<span></span>
      </div>
      <div
        v-for="(item, i) in dataDate"
        :key="item"
        @click="getNums(i + 2), (nums = i + 2)"
        :class="nums == i + 2 ? `active` : ''"
      >
        周 {{ item }}
        <span></span>
      </div>
    </div>
    <div class="imgs">
      <TransverseAnimation v-for="(item, i) in getNum" :key="i" :item="item">
      </TransverseAnimation>
    </div>
  </div>
</template>

<script>
import TransverseAnimation from "@/components/TransverseAnimation.vue";
export default {
  components: {
    TransverseAnimation,
  },
  props: {
    //   billboardList: Object,
    //   songId: Number,
  },
  data() {
    return {
      dataDate: null,
      nums: 0,
      datas: null,
      getNum: 0,
    };
  },
  methods: {
    getNums(s) {
      this.nums = s;
      console.log(s, this.nums);

      let arrys = [5, 17, 13, 9, 13, 5, 17];
      let dataDay = [];
      let numss = 0;
      for (let i = 0; i < s; i++) {
        numss += arrys[i];
      }
      for (let i = 0; i < arrys[s]; i++) {
        dataDay.push(this.datas[i + numss]);
      }
      this.getNum = dataDay;
    },
    getDay() {
      let nums = "7123456".charAt(new Date().getDay());
      let ssss = [];
      let _this = this;
      let dataDates = ["一", "二", "三", "四", "五", "六", "七"];
      for (let i = 1; i < 6; i++) {
        let s = nums - 2 - i;
        if (s < 0) {
          let ss = Math.abs(s);
          ssss.push(dataDates[7 - ss]);
        } else {
          ssss.push(dataDates[s]);
        }
      }
      this.dataDate = ssss;
    },
    initData() {
      this.$axios
        .get(
          `https://apis.netstart.cn/bcomic/ClassPage?styleId=-1&areaId=-1&isFinish=-1&order=1&pageNum=1&pageSize=100&isFree=-1`
        )
        .then((response) => {
          this.datas = response.data.data;
          this.getNums(0);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getDay();
    this.initData();
  },
};
</script>

<style lang="less" scoped>
.seleteDate {
  width: 1160px;
  height: 42px;
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  > div {
    color: #0000008f;
    font-size: 16px;
    margin: 0px 28px 0px 0px;
    padding: 1px 6px;
  }
  > div:nth-child(1) {
    color: #000000de;
    font-size: 32px;
  }
}
.imgs {
  width: 1160px;
  height: 478px;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
  align-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  >div:nth-child{
    margin-right: 14px;
  }
  >div:nth-child(4n){
    margin-right: 0px;
  }
}
.active {
  color: #32aaff !important;
  transition: color 0.5s;
  span {
    display: block;
    position: absolute;
    width: 10px;
    height: 3px;
    background: #32aaff;
    margin-top: 2px;
    margin-left: 13px;
    transition: background 0.5s;
  }
}
</style>
